.container {
	background-color: #b8cef6;
	padding: 326rpx 0 0;
	overflow: hidden;
	transition: all 0.5s;

	.login {
		background-color: #090e1d;
		height: 100%;
		border-radius: 85rpx 85rpx 0 0;
		position: relative;
		padding: 42rpx 95rpx 42rpx 85rpx;

		.logo {
			width: 184rpx;
			height: 184rpx;
			position: absolute;
			left: 95rpx;
			top: -92rpx;
		}

		.avatar {
			border-radius: 50%;
			overflow: hidden;

			image {
				width: 184rpx;
				height: 184rpx;
			}

			&-text {
				position: absolute;
				width: 100%;
				bottom: 0;
				height: 40%;
				background-color: rgba(0, 0, 0, 0.5);
				color: #ffffff;
				font-size: 24rpx;
				padding: 10rpx 0;
				text-align: center;
				pointer-events: none;
				transition: all 0.25s;
				opacity: 1;
				font-family: PINGFANG-REGULAR;
				&.hasAvatar {
					height: 0;
					opacity: 0;
				}
			}
		}

		.title {
			text-align: right;
			font-size: 52rpx;
			font-style: normal;
			font-weight: bold;
			line-height: 66rpx;
			color: #ffffff;
			font-family: PINGFANG-HEAVY;
		}
		.info {
			margin-top: 20.4rpx;
			color: #bec5d2;
			font-size: 26rpx;
			font-style: normal;
			font-weight: 500;
			line-height: 44rpx;
			white-space: break-spaces;
			word-wrap: break-word;
			word-break: break-all;
			font-family: PINGFANG-REGULAR;
		}

		.input {
			margin-top: 28rpx;
			&.focus {
				.input-card {
					border: 2rpx solid var(--Blue-60, #0f67fe);
					box-shadow: 0 0 0 7rpx #0f67fe40;
				}
			}
			&-title {
				color: #ffffff;
				font-family: 'PINGFANG-MEDIUM';
				font-size: 24rpx;
				font-style: normal;
				font-weight: 800;
				line-height: normal;
				letter-spacing: -0.24rpx;
			}
			&-card {
				margin-top: 14rpx;
				width: 100%;
				height: 98rpx;
				background: var(--Gray-90, #141b31);
				padding: 28rpx;
				justify-content: space-between;
				align-items: center;
				border-radius: 20rpx;
				display: flex;
				gap: 14rpx;
				transition: all 0.375s;

				image {
					width: 40rpx; /* 24 * 1.74 */
					height: 40rpx; /* 24 * 1.74 */
					&.eye {
						filter: hue-rotate(180deg) invert(100%);
					}
				}
				.uni-input {
					color: #ffffff;
					width: 100%;
					font-family: PINGFANG-MEDIUM;
					&.password {
						&::-ms-reveal {
							display: none;
						}
					}
				}
			}

			&.check {
				display: flex;
				align-items: baseline;
				gap: 30rpx;
			}
			.check-view {
				width: 20rpx;
				height: 20rpx;
				checkbox {
					transform: scale(0.7);
				}
			}

			.check-info {
				height: 20rpx;
				flex: 1 0 0;
				width: 100%;
				color: #ffffff;
				font-family: 'PINGFANG-MEDIUM';
				font-size: 20rpx;
				font-style: normal;
				font-weight: 600;
				line-height: normal;
				letter-spacing: -0.24rpx;
			}

			button {
				background-color: #b8cef6;
				height: 98rpx;
				padding: 28rpx 55rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				gap: 20rpx;
				text {
					color: #000000;
					font-family: 'PINGFANG-MEDIUM';
					font-size: 28rpx;
					font-style: normal;
					font-weight: 700;
					line-height: normal;
					letter-spacing: 5rpx;
				}
				image {
					width: 40rpx;
					height: 40rpx;
				}
			}
		}

		.footer {
			width: 100%;
			position: absolute;
			left: 0;
			bottom: 36rpx;
			text-align: center;
			display: flex;
			justify-content: center;
			align-items: center;
			&-text {
				color: #bec5d2;
				text-align: center;
				font-family: 'PINGFANG-MEDIUM';
				font-size: 24rpx;
				font-style: normal;
				font-weight: 600;
				line-height: normal;
				&.signUp {
					color: #fa4d5e;
					text-decoration-line: underline;
				}
			}
		}
	}
}
